<template>
  <div>
    <!-- 首先页面中要准备两个元素，一个input，一个button -->
    <input v-if="isSearch" class="ipt" type="text" ref="ipt">
    <!-- 点击按钮修改状态, 所以要@click -->
    <button v-else @click="changeOther">点击搜索</button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      isSearch: false
    }
  },
  methods: {
    change () {
      // 想要，一点击搜索按钮，输入框切换，并且输入框获取到焦点
      this.isSearch = true // 按理说，input框应该渲染 ，但是因为Vue的dom更新是异步的
      
      this.$nextTick(() => {
          this.$refs.ipt.focus()
      })
      // setTimeout(() => {
      //   this.$refs.ipt.focus()
      // }, 0);
    },
    async changeOther(){
        this.isSearch = true   
        await this.$nextTick()   
        this.$refs.ipt.focus()
    }
  }
}
</script>